<template>
  <div class="padding-20 flex">
    <el-menu class="report-menu" :default-active="defaultActive" background-color="#f1f1f1" active-text-color="#ffffff">
      <el-menu-item index="project" @click="menuClick('project')">
        <span slot="title" class="font-size-16">项目基础信息</span>
      </el-menu-item>
      <el-submenu index="base">
        <template slot="title">
          <span slot="title" class="font-size-16">项目楼栋信息</span>
        </template>
        <el-menu-item v-for="menu in buildingList" :key="menu.primaryKey" :index="menu.primaryKey" @click="menuClick('building', menu.primaryKey)">
          <span slot="title" class="font-size-16">{{ menu.spaceName }}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-for="menu in menuData" :key="menu.key" :index="menu.key" @click="menuClick(menu.key)">
        <span slot="title" class="font-size-16">{{ menu.name }}</span>
      </el-menu-item>
    </el-menu>

    <div class="flex-1">
      <tab-project v-if="activeTab == 'project'" ref="project"></tab-project>
      <tab-building v-if="activeTab == 'building'" ref="building" :spaceKey="spaceKey"></tab-building>
      <tab-advertising v-if="activeTab == 'advertising'" ref="advertising"></tab-advertising>
      <tab-park v-if="activeTab == 'park'" ref="park"></tab-park>
      <tab-equipment v-if="activeTab == 'equipment'" ref="equipment"></tab-equipment>
      <tab-facility v-if="activeTab == 'facility'" ref="facility"></tab-facility>
      <tab-personnel v-if="activeTab == 'personnel'" ref="personnel"></tab-personnel>
    </div>
  </div>
</template>

<script>
  import tabProject from './project.vue';
  import tabBuilding from './buildingTab.vue';
  import tabAdvertising from './advertising.vue';
  import tabPark from './park.vue';
  import tabEquipment from '../../EquipmentManage/Index.vue';
  import tabFacility from './facility.vue';
  import tabPersonnel from '../../../../limit/pages/host/modules/projectPersonnel.vue';
  import merge from 'webpack-merge';
  import projectInfoApi from '../../../api/projectInfo';

  export default {
    data() {
      return {
        defaultActive: 'project',
        activeTab: 'project',
        spaceKey: '',
        menuData: [
          { name: '项目广告资源', key: 'advertising' },
          { name: '项目停车场', key: 'park' },
          { name: '项目设备管理', key: 'equipment' },
          { name: '项目其他设施', key: 'facility' },
          { name: '项目人员管理', key: 'personnel' },
        ],
        buildingList: [],
      };
    },

    methods: {
      menuClick(key, spaceKey) {
        this.activeTab = key;
        this.spaceKey = spaceKey || '';
        if (key == 'building') {
          this.$nextTick(() => {
            this.$refs.building.init && this.$refs.building.init();
          });
        }
      },

      // 楼栋
      async getBuildList() {
        let res = await projectInfoApi.apiAllBuildList({
          projectKey: this.$route.query.projectKey,
        });
        this.buildingList = res.rows || [];
      },
    },

    created() {
      let route = this.$route.query;
      let cacheProjectKey = localStorage.getItem('projectKey');
      if (!route.projectKey) {
        this.$router.replace({ query: merge(this.$route.query, { projectKey: cacheProjectKey }) });
      }
    },

    mounted() {
      this.getBuildList();
    },

    components: { tabProject, tabBuilding, tabAdvertising, tabPark, tabEquipment, tabFacility, tabPersonnel },
  };
</script>

<style lang="scss" scoped>
  .report-menu {
    min-height: calc(100vh - 100px);
    width: 210px;
  }
  ::v-deep .el-menu {
    border-right: 0 !important;
    .is-active {
      background: rgb(193, 193, 193) !important;
    }
  }
</style>
